<template>
	<div class="register_form_wrapper">
		<div class="header">
			<h2>用户注册</h2>
			<p>输入以下相关信息进行注册</p>
		</div>
		<el-form ref="form" :rules="formRules" :model="formData" label-width="90px">
			<el-form-item prop="userName" label="姓名">
				<el-input prefix-icon="sw-icon-login-user" placeholder="输入您的姓名" v-model="formData.userName"></el-input>
			</el-form-item>
			<el-form-item prop="filed1" label="职称">
				<el-select v-model="formData.filed1" popper-class="register_post" placeholder="请选择您的职称">
					<template slot="prefix">
						<i class="sw-icon-job-title"></i>
					</template>
					<el-option v-for="(item, index) in dictEnums['USER_POST']" :key="index" :label="item.content" :value="item.content"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="filed2" label="单位名称">
				<el-input prefix-icon="sw-icon-depart" placeholder="输入您的单位名称" v-model="formData.filed2"></el-input>
			</el-form-item>
			<el-form-item prop="account" label="电子邮箱">
				<el-input prefix-icon="sw-icon-login-email" placeholder="输入您的电子邮箱" v-model="formData.account"></el-input>
			</el-form-item>
			<el-form-item prop="phone" label="联系电话">
				<el-input prefix-icon="sw-icon-telephone" placeholder="输入您的联系电话" maxlength="11" v-model="formData.phone"></el-input>
			</el-form-item>
			<el-form-item prop="password" label="登录密码">
				<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的登录密码" v-model="formData.password" show-password></el-input>
			</el-form-item>
			<el-form-item prop="confirmpass" label="确认密码">
				<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的确认密码" v-model="formData.confirmpass" show-password></el-input>
			</el-form-item>
			<el-form-item>
				<div class="login_button_box">
					<el-button class="login" type="primary" @click="handleSubmitLogin" :loading="btnLoading">注册</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-divider></el-divider>
		<div class="bottom">
			<p>
				<span>已经有账户了吗？</span>
				<router-link :to="{ path: '/login' }">登录</router-link>
			</p>
		</div>
	</div>
</template>

<script>
import rsa from '@/utils/rsa';
import { mapGetters } from 'vuex';
import { register } from '@/api/login';
export default {
	data() {
		const passRule = this.$getPassRules(this.$store.getters.siteInfo);
		const passValidator = (rule, value, callback) => {
			if (!this.formData.password) {
				callback(new Error('请输入登录密码'));
			} else if (this.formData.password !== value) {
				callback(new Error('登录密码和确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			formData: {},
			formRules: {
				userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				account: [
					{ required: true, message: '请输入电子邮件地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur' }
				],
				filed1: [{ required: true, message: '请选择职称', trigger: 'change' }],
				filed2: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
				phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入登录密码', trigger: 'blur' },
					{ pattern: passRule.rules, message: passRule.message, trigger: 'blur' }
				],
				confirmpass: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{ validator: passValidator, trigger: 'blur' }
				]
			},
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	methods: {
		//提交登录
		handleSubmitLogin() {
			this.$refs['form'].validate((vail) => {
				if (!vail) return false;
				this.btnLoading = true;
				this.registerRequest();
			});
		},

		//格式化注册参数
		formatRegisterParmas() {
			let params = this.$deepClone(this.formData);
			params['password'] = rsa.rsaPublicData(params.password);
			params['type'] = '2';
			params['picId'] = '-1';
			params['systemKey'] = '1';
			return params;
		},

		//登录请求
		async registerRequest(data) {
			let params = this.formatRegisterParmas();
			let result = await register(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$alert('注册信息已提交，请等待管理员审核', '注册提醒', {
					type: 'success',
					confirmButtonText: '登录',
					callback: (action) => {
						this.$router.back();
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.register_form_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5%;
	min-width: 400px;
	overflow: hidden;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	.header {
		line-height: 1;
		padding-bottom: 32px;
		h2 {
			font-size: 20px;
			margin-bottom: 16px;
			color: #303133;
		}
		p {
			font-size: 14px;
			color: #909399;
		}
	}
	.el-form-item__label {
		line-height: 40px !important;
		margin-bottom: 0 !important;
	}
	.el-select {
		width: 100%;
	}
	.el-input__suffix-inner {
		display: block;
		line-height: 1;
		height: 100%;
	}
}
</style>
<style lang="scss">
.register_post {
	.el-select-dropdown__item {
		font-size: 16px;
	}
}
</style>
